<template>
  <!-- 推荐商品搜索 -->
  <div class="search">
    <el-form
      :inline="true"
      ref="ruleFormRef"
      :rules="rules"
      :model="state.from"
      class="demo-form-inline"
    >
      <el-form-item label="货源搜索">
        <el-input
          v-model="state.from.title"
          style="width: 400px"
          placeholder="支持商品标题搜索"
          clearable
        />
      </el-form-item>
      <el-form-item label="请选择类目">
        <el-cascader
          v-model="state.from.category_id"
          style="width: 400px"
          :options="state.goodsSelect"
          :props="cascaderProps"
          clearable
        />
      </el-form-item>
      <el-form-item label="服务履约">
        <div class="service-button-style">
          <el-radio-group v-model="state.from.service">
            <el-radio-button v-for="opt in serviceOpt" :key="opt.code" :value="opt.code">
              {{ opt.name }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="价格区间" prop="price">
        <div class="price-button-style">
          <el-radio-group v-model="state.from.price">
            <el-radio-button v-for="opt in priceOpt" :key="opt.value" :value="opt.value">
              {{ opt.label }}
            </el-radio-button>
            <el-radio-button class="priceBox" value="custom">
              <div class="sa-flex">
                <el-input v-model="state.price1" placeholder="最低价" type="number" :min="0">
                  <template #prefix>￥</template>
                </el-input>
                <div class="line">-</div>
                <el-input
                  v-model="state.price2"
                  placeholder="最高价"
                  type="number"
                  :min="0"
                  :max="10000"
                >
                  <template #prefix>￥</template>
                </el-input>
              </div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button color="#3768FA" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="sortBox sa-flex sa-row-between sa-p-b-20">
      <div class="sortBox-left sa-flex">
        <div
          :class="['sortBox-item sa-flex', { active: state.sortMode == opt.key }]"
          v-for="(opt, index) in state.sortData"
          :key="opt.key"
          @click="onSort(opt, index)"
        >
          {{ opt.text }}
          <template v-if="opt.key !== 'default'">
			<div v-if="state.sortMode != opt.key">
				<el-icon><DCaret /></el-icon>
			</div>
			<template v-else>
				<div v-if="opt.value == 'asc'">
					<el-icon><CaretTop /></el-icon>
				</div>
				<div v-else-if="opt.value == 'desc'">
					<el-icon><CaretBottom /></el-icon>
				</div>
			</template>
	
          </template>
        </div>
      </div>
      <div class="sortBox-right">
        <el-button type="info" text @click="btnTap('log')"> 铺货记录 </el-button>
        <el-button type="info" text @click="btnTap('collect')"> 收藏夹 </el-button>
        <el-button type="info" text @click="btnTap('setting')"> 铺货设置 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../recommend.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { cloneDeep, isNil, omitBy } from 'lodash';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { composeFilter } from '@/sheep/utils';

  import { useRouter } from 'vue-router';

  const emit = defineEmits(['search', 'sort', 'btn']);
  const ruleFormRef = ref(null);
  const router = useRouter();
  const cascaderProps = {
    label: 'name',
    value: 'id',
    checkStrictly: true,
  };
  const serviceOpt = [
    { code: '', name: '全部' },
    { code: '48小时发货', name: '48小时发货' },
    { code: '7天包换', name: '7天包换' },
    { code: '7天无理由包退', name: '7天无理由包退' },
    { code: '少货必赔', name: '少货必赔' },
  ];
  const priceOpt = [
    {
      value: '',
      label: '全部',
    },
    {
      value: '0-50',
      label: '￥50元以下',
    },
    {
      value: '50-80',
      label: '￥50-￥80元',
    },
    {
      value: '80-100',
      label: '￥80-￥100元',
    },
    {
      value: '100-300',
      label: '￥101-￥300元',
    },
  ];

  const state = reactive({
    price1: '',
    price2: '',
    from: {
      title: '',
      category_id: '',
      price: '',
      service: '',
      region: '',
      date: '',
      sort: '',
    },
    goodsSelect: [],
    sortMode: 'default',
    sortData: [
      {
        text: '综合排序',
        key: 'default',
        value: 'default',
      },
      {
        text: '销量',
        key: 'sales',
        value: '',
      },
      {
        text: '上新时间',
        key: 'time',
        value: '',
      },
      {
        text: '采购价',
        key: 'price_1',
        value: '',
      },
    ],
  });
  const rules = {
    price: [
      {
        validator: (rule, value, callback) => {
          if (value === 'custom') {
			let price1 = Number(state.price1);
			let price2 = Number(state.price2);
            let mesage = '';
            if (state.price1 === '' || state.price2 === '') {
              mesage = '请输入正确的自定义价格区间';
            } else if (price1 > price2) {
              mesage = '最低价不能大于最高价';
            } else if (price1 < 0 || price2 < 0) {
              mesage = '价格不能小于0';
            } else if (price1 === price2) {
              mesage = '最低价不能等于最高价';
            }
            if (mesage) {
              callback(new Error(mesage));
            } else {
              callback();
            }
          } else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ],
  };
  onMounted(() => {
    goodsSelect();
  });
  function btnTap(i) {
    emit('btn', i);
  }
  async function goodsSelect() {
    let { data, error } = await api.goodsSelect();
    if (error == 0) {
      state.goodsSelect = data;
    }
  }
  function onSort(opt, index) {
    if (state.sortMode == opt.key) {
      if (state.sortMode != 'default') {
        opt.value = opt.value == 'desc' ? 'asc' : 'desc';
      }else if(state.sortMode == opt.key){
		return
	  }else if ( opt.key == 'default'){
		emit('sort',{});
		return
	  }
    } else if (opt.key == 'default'){
		state.sortMode = opt.key;
		emit('sort',{});
		return
	} else {
      state.sortMode = opt.key;
      if (state.sortMode != 'default' && !opt.value) {
        opt.value = opt.value == 'desc' ? 'asc' : 'desc';
      }
    }
	emit('sort',{
		order_type:opt.value,
		order_param:opt.key,
	});
  }
  function cleanFlatObject(obj) {
    return omitBy(obj, (val) => isNil(val) || val === '' || Number.isNaN(val));
  }
  const onSubmit = () => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        let tempSearch = cleanFlatObject(cloneDeep(state.from));
        const { service,price, title,category_id, ...filteredTempSearch } = tempSearch;
        let search = composeFilter(filteredTempSearch, {
        });
		let price_qj = '';
        if (price == 'custom') {
           price_qj = `${state.price1}-${state.price2}`
        }else{
			price_qj = price;
		}
        let searchData = {
          ...search,
		  price_qj,
		  category_id,
          title,
          service,
        };
        // console.log('searchData',searchData)
        emit('search', searchData);
      } else {
        return false;
      }
    });
  };
</script>

<style lang="scss" scoped>
  ::v-deep {
    .priceBox {
      .el-radio-button__inner {
        padding: 0 !important;
      }

      .el-input__wrapper {
        border: 0px solid transparent !important;
        background-color: transparent;
      }

      .el-input {
        width: 110px !important;
        margin-right: 30px !important;
        height: 32px !important;
        --el-border-color:
          rgba(255, 255, 255, 0), --el-input-focus-border-color: rgba(255, 255, 255, 0),
          --el-input-focus-border-width: 0px, --el-input-hover-border-color: rgba(255, 255, 255, 0),
          --el-input-hover-border-width: 0px, --el-input-bg-color: rgba(0, 0, 0, 0.8);
      }
    }

    .is-active {
      .el-input__inner {
        color: #fff;
      }
    }

    .demo-form-inline {
      .el-form-item__label {
        font-size: 16px !important;
        font-weight: 600;
        color: #333333;
      }
    }

    .price-button-style,
    .service-button-style {
      transform: translateY(-3px);

      .el-checkbox-button,
      .el-radio-button {
        margin-right: 10px;
      }

      .el-checkbox-button__inner,
      .el-radio-button__inner {
        border-color: transparent !important;
        background-color: #f7f7f7;
        border-radius: 4px !important;

        &:hover {
          color: #3768fa;
        }
      }

      .is-checked,
      .is-active {
        .el-checkbox-button__inner,
        .el-radio-button__inner {
          background-color: #3768fa !important;
          color: #fff;
        }
      }
    }
  }

  .search {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    .search-input {
      width: 300px;
    }
    .serive-btn {
      margin-right: 10px;
      border-radius: 4px;
    }
  }

  .sortBox {
    .sortBox-left {
      .sortBox-item {
        margin-right: 4px;
        justify-content: center;
        width: 90px;
        height: 32px;
        cursor: pointer;
        color: #666;
        border: 1px solid #666;
        font-size: 16px;
        .el-icon {
          margin-left: 4px;
          color: #666;
        }
      }
      .active {
        color: #3768fa;
        font-weight: 600;
        border: 1px solid #3768fa;
        .el-icon {
          color: #3768fa;
        }
      }
    }
  }
</style>
